<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - 教材资源管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                @apply transition-transform duration-300 hover:scale-105;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .faq-active {
                @apply border-primary bg-primary/5;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <a href="#" class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>教材资源管理系统</span>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">教材版本</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">帮助中心</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索帮助文档..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 移动端搜索框 -->
    <div class="md:hidden p-3 bg-white border-t border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索帮助文档..." 
                   class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧边栏 - 帮助文档导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <h2 class="font-bold text-lg mb-3">帮助中心</h2>
                
                <div class="space-y-1">
                    <a href="#" class="block py-2 px-3 rounded-lg bg-primary/10 text-primary font-medium">
                        <i class="fa fa-question-circle mr-2"></i>常见问题
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-book mr-2"></i>使用指南
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-film mr-2"></i>视频教程
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-file-text-o mr-2"></i>API文档
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-users mr-2"></i>社区交流
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-shield mr-2"></i>安全中心
                    </a>
                </div>
            </div>
            
            <!-- 常见问题分类 -->
            <div class="p-4">
                <h3 class="font-medium text-sm text-gray-500 mb-2">常见问题分类</h3>
                <div class="space-y-1">
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                        账号管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-primary/5 text-primary border-l-2 border-primary">
                        <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                        教材版本管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        章节与知识点关联
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        数据导入导出
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        权限设置
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        系统集成
                    </a>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary">帮助中心</span>
                </div>
                
                <!-- 内容标题区 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">帮助中心</h2>
                    <p class="text-gray-500 mt-1">查找常见问题的解答，了解如何使用我们的系统</p>
                </div>
                
                <!-- 搜索区域 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in">
                    <div class="text-center mb-4">
                        <h3 class="font-bold text-lg">有什么可以帮助您？</h3>
                        <p class="text-gray-500 mt-1">搜索常见问题、使用指南或联系我们的支持团队</p>
                    </div>
                    
                    <div class="relative max-w-2xl mx-auto">
                        <input type="text" placeholder="输入关键词搜索..." 
                               class="w-full pl-12 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-lg">
                        <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i>
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white px-4 py-1.5 rounded-lg hover:bg-primary/90 transition-colors">
                            搜索
                        </button>
                    </div>
                    
                    <div class="flex flex-wrap justify-center gap-2 mt-6">
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            如何添加新版本？
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            章节结构管理
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            知识点关联
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            数据导入导出
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            多版本对比
                        </a>
                    </div>
                </div>
                
                <!-- 常见问题 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.1s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold text-lg">教材版本管理常见问题</h3>
                        <div class="flex items-center space-x-2">
                            <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">共24个问题</span>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <!-- FAQ 项目 1 -->
                        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors">
                            <div class="faq-question p-4 cursor-pointer flex items-center justify-between">
                                <div class="flex items-center">
                                    <span class="text-primary font-bold mr-2">Q:</span>
                                    <span class="font-medium">如何添加新的教材版本？</span>
                                </div>
                                <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                            </div>
                            
                            <div class="faq-answer bg-gray-50 p-4 border-t border-gray-100 hidden">
                                <div class="flex">
                                    <span class="text-success font-bold mr-2 mt-0.5">A:</span>
                                    <div>
                                        <p>添加新教材版本的步骤如下：</p>
                                        <ol class="list-decimal pl-5 mt-2 space-y-1">
                                            <li>在左侧导航栏中，点击"教材版本"选项</li>
                                            <li>在教材版本列表页面，点击右上角的"添加新版本"按钮</li>
                                            <li>在弹出的表单中，填写教材版本的基本信息（名称、学科、出版社等）</li>
                                            <li>上传教材封面（可选）</li>
                                            <li>设置章节结构，可以手动添加或导入已有结构</li>
                                            <li>点击"保存并启用"完成添加</li>
                                        </ol>
                                        <p class="mt-2">添加完成后，新的教材版本将显示在教材列表中，您可以对其进行编辑、删除等操作。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 2 -->
                        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors faq-active">
                            <div class="faq-question p-4 cursor-pointer flex items-center justify-between">
                                <div class="flex items-center">
                                    <span class="text-primary font-bold mr-2">Q:</span>
                                    <span class="font-medium">如何导入已有的章节结构？</span>
                                </div>
                                <i class="fa fa-angle-up text-gray-400 transition-transform"></i>
                            </div>
                            
                            <div class="faq-answer bg-gray-50 p-4 border-t border-gray-100">
                                <div class="flex">
                                    <span class="text-success font-bold mr-2 mt-0.5">A:</span>
                                    <div>
                                        <p>系统支持从Excel或JSON文件导入章节结构，具体步骤如下：</p>
                                        <ol class="list-decimal pl-5 mt-2 space-y-1">
                                            <li>准备好包含章节结构的Excel文件或JSON文件</li>
                                            <li>在教材版本编辑页面，找到"章节结构管理"区域</li>
                                            <li>点击"导入章节"按钮</li>
                                            <li>在弹出的对话框中，选择要导入的文件</li>
                                            <li>系统会自动解析文件内容并显示预览</li>
                                            <li>确认无误后，点击"确认导入"完成操作</li>
                                        </ol>
                                        
                                        <div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                                            <h4 class="font-medium text-blue-700 flex items-center">
                                                <i class="fa fa-info-circle mr-2"></i> 文件格式要求
                                            </h4>
                                            <ul class="list-disc pl-5 mt-2 space-y-1 text-sm text-blue-800">
                                                <li>Excel文件应包含至少两列："章节名称"和"父章节ID"</li>
                                                <li>顶级章节的父章节ID应为0或空</li>
                                                <li>JSON文件应遵循特定的格式结构（可参考导出的JSON文件）</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 3 -->
                        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors">
                            <div class="faq-question p-4 cursor-pointer flex items-center justify-between">
                                <div class="flex items-center">
                                    <span class="text-primary font-bold mr-2">Q:</span>
                                    <span class="font-medium">如何进行版本对比？</span>
                                </div>
                                <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                            </div>
                            
                            <div class="faq-answer bg-gray-50 p-4 border-t border-gray-100 hidden">
                                <div class="flex">
                                    <span class="text-success font-bold mr-2 mt-0.5">A:</span>
                                    <div>
                                        <p>版本对比功能允许您查看两个不同版本之间的差异，步骤如下：</p>
                                        <ol class="list-decimal pl-5 mt-2 space-y-1">
                                            <li>在教材版本编辑页面，找到"版本对比设置"区域</li>
                                            <li>从下拉菜单中选择要对比的基准版本</li>
                                            <li>系统会自动分析当前版本与所选版本之间的差异</li>
                                            <li>对比结果将显示新增、修改和删除的章节和知识点</li>
                                            <li>点击具体项目可查看详细差异</li>
                                        </ol>
                                        <p class="mt-2">版本对比功能对于跟踪教材更新历史和审核修改非常有用。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 4 -->
                        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors">
                            <div class="faq-question p-4 cursor-pointer flex items-center justify-between">
                                <div class="flex items-center">
                                    <span class="text-primary font-bold mr-2">Q:</span>
                                    <span class="font-medium">如何批量添加知识点？</span>
                                </div>
                                <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                            </div>
                            
                            <div class="faq-answer bg-gray-50 p-4 border-t border-gray-100 hidden">
                                <div class="flex">
                                    <span class="text-success font-bold mr-2 mt-0.5">A:</span>
                                    <div>
                                        <p>批量添加知识点有两种方法：</p>
                                        <h4 class="font-medium mt-2">方法一：逐个添加</h4>
                                        <ol class="list-decimal pl-5 mt-1 space-y-1">
                                            <li>展开相应的章节和小节</li>
                                            <li>在小节下，点击"添加知识点"按钮</li>
                                            <li>输入知识点名称和描述</li>
                                            <li>点击"保存"完成添加</li>
                                        </ol>
                                        
                                        <h4 class="font-medium mt-2">方法二：批量导入</h4>
                                        <ol class="list-decimal pl-5 mt-1 space-y-1">
                                            <li>准备好包含知识点的Excel或CSV文件</li>
                                            <li>在章节编辑页面，点击"批量导入"按钮</li>
                                            <li>选择要导入的文件</li>
                                            <li>映射文件列与系统字段</li>
                                            <li>点击"确认导入"完成操作</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- FAQ 项目 5 -->
                        <div class="faq-item border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors">
                            <div class="faq-question p-4 cursor-pointer flex items-center justify-between">
                                <div class="flex items-center">
                                    <span class="text-primary font-bold mr-2">Q:</span>
                                    <span class="font-medium">如何设置知识点之间的关联？</span>
                                </div>
                                <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                            </div>
                            
                            <div class="faq-answer bg-gray-50 p-4 border-t border-gray-100 hidden">
                                <div class="flex">
                                    <span class="text-success font-bold mr-2 mt-0.5">A:</span>
                                    <div>
                                        <p>设置知识点之间的关联可以帮助构建完整的知识体系，步骤如下：</p>
                                        <ol class="list-decimal pl-5 mt-2 space-y-1">
                                            <li>打开要设置关联的知识点编辑页面</li>
                                            <li>在知识点详情页面，找到"关联知识点"区域</li>
                                            <li>点击"添加关联"按钮</li>
                                            <li>通过搜索或层级导航选择要关联的知识点</li>
                                            <li>选择关联类型（前置知识、相关知识、拓展知识等）</li>
                                            <li>设置关联强度和描述（可选）</li>
                                            <li>点击"保存"完成关联设置</li>
                                        </ol>
                                        <p class="mt-2">设置关联后，在学习某个知识点时，可以快速访问其相关知识，形成知识网络。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary hover:text-primary/80 font-medium inline-flex items-center">
                            查看全部常见问题
                            <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 使用指南 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.2s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold text-lg">使用指南</h3>
                        <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看全部指南</a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 指南卡片 1 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 text-primary mb-4">
                                <i class="fa fa-book text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">新手指南</h4>
                            <p class="text-gray-600 text-sm mb-3">了解系统的基本功能和操作流程，快速上手教材资源管理。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 指南卡片 2 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-secondary/10 text-secondary mb-4">
                                <i class="fa fa-sitemap text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">章节结构管理</h4>
                            <p class="text-gray-600 text-sm mb-3">学习如何创建、编辑和管理教材的章节结构，构建完整的知识体系。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 指南卡片 3 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-accent/10 text-accent mb-4">
                                <i class="fa fa-link text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">知识点关联</h4>
                            <p class="text-gray-600 text-sm mb-3">掌握知识点之间的关联设置方法，形成系统化的知识网络。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 指南卡片 4 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-success/10 text-success mb-4">
                                <i class="fa fa-file-excel-o text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">数据导入导出</h4>
                            <p class="text-gray-600 text-sm mb-3">学习如何导入现有数据和导出系统数据，支持多种格式。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 指南卡片 5 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-warning/10 text-warning mb-4">
                                <i class="fa fa-refresh text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">版本更新管理</h4>
                            <p class="text-gray-600 text-sm mb-3">了解如何创建新版本、对比差异以及管理教材的更新历史。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 指南卡片 6 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center justify-center h-16 w-16 rounded-full bg-danger/10 text-danger mb-4">
                                <i class="fa fa-cog text-2xl"></i>
                            </div>
                            <h4 class="font-bold text-gray-800 mb-2">系统设置</h4>
                            <p class="text-gray-600 text-sm mb-3">学习如何配置系统参数、管理用户权限和自定义系统外观。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                开始学习
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 视频教程 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.3s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold text-lg">视频教程</h3>
                        <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">查看全部视频</a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 视频卡片 1 -->
                        <div class="group">
                            <div class="relative rounded-lg overflow-hidden aspect-video bg-gray-200">
                                <img src="https://picsum.photos/id/96/600/400" alt="系统概览视频封面" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-white bg-opacity-20 flex items-center justify-center backdrop-blur-sm">
                                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white">
                                            <i class="fa fa-play"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
                                    12:34
                                </div>
                            </div>
                            <h4 class="font-medium mt-3">系统概览与快速入门</h4>
                            <p class="text-gray-500 text-sm mt-1">了解系统的基本功能和界面布局，快速上手使用。</p>
                        </div>
                        
                        <!-- 视频卡片 2 -->
                        <div class="group">
                            <div class="relative rounded-lg overflow-hidden aspect-video bg-gray-200">
                                <img src="https://picsum.photos/id/237/600/400" alt="创建教材版本视频封面" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-white bg-opacity-20 flex items-center justify-center backdrop-blur-sm">
                                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white">
                                            <i class="fa fa-play"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
                                    18:12
                                </div>
                            </div>
                            <h4 class="font-medium mt-3">创建与管理教材版本</h4>
                            <p class="text-gray-500 text-sm mt-1">详细介绍如何创建新的教材版本和管理现有版本。</p>
                        </div>
                        
                        <!-- 视频卡片 3 -->
                        <div class="group">
                            <div class="relative rounded-lg overflow-hidden aspect-video bg-gray-200">
                                <img src="https://picsum.photos/id/48/600/400" alt="知识点关联视频封面" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                                    <div class="w-14 h-14 rounded-full bg-white bg-opacity-20 flex items-center justify-center backdrop-blur-sm">
                                        <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white">
                                            <i class="fa fa-play"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
                                    22:45
                                </div>
                            </div>
                            <h4 class="font-medium mt-3">高级知识点关联技巧</h4>
                            <p class="text-gray-500 text-sm mt-1">学习如何建立复杂的知识点关联网络，提升学习效果。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 联系支持 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.4s">
                    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
                        <div>
                            <h3 class="font-bold text-lg">联系支持</h3>
                            <p class="text-gray-500 mt-1">如果您无法找到所需的答案，请通过以下方式联系我们的支持团队</p>
                        </div>
                        <div class="mt-4 md:mt-0">
                            <a href="#" class="inline-flex items-center bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                                <i class="fa fa-envelope-o mr-2"></i> 提交工单
                            </a>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- 支持渠道 1 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-colors">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-envelope-o"></i>
                                </div>
                                <h4 class="font-medium ml-3">邮件支持</h4>
                            </div>
                            <p class="text-gray-600 text-sm mb-2">发送邮件至我们的支持邮箱，我们将在24小时内回复</p>
                            <a href="mailto:support@example.com" class="text-primary hover:text-primary/80 text-sm">support@example.com</a>
                        </div>
                        
                        <!-- 支持渠道 2 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-colors">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <h4 class="font-medium ml-3">电话支持</h4>
                            </div>
                            <p class="text-gray-600 text-sm mb-2">工作日 9:00-18:00 提供电话支持服务</p>
                            <a href="tel:400-123-4567" class="text-primary hover:text-primary/80 text-sm">400-123-4567</a>
                        </div>
                        
                        <!-- 支持渠道 3 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/30 hover:bg-primary/5 transition-colors">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-comments-o"></i>
                                </div>
                                <h4 class="font-medium ml-3">在线客服</h4>
                            </div>
                            <p class="text-gray-600 text-sm mb-2">点击在线客服图标，获取实时帮助</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm">立即咨询</a>
                        </div>
                    </div>
                </div





                <!-- 社区交流 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.5s">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold text-lg">社区交流</h3>
                        <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium">访问社区</a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 热门讨论 -->
                        <div>
                            <h4 class="font-medium text-gray-800 mb-3">热门讨论</h4>
                            <div class="space-y-4">
                                <div class="border-b border-gray-100 pb-3">
                                    <div class="flex items-center mb-2">
                                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                        <div class="ml-2">
                                            <div class="font-medium text-sm">李老师</div>
                                            <div class="text-xs text-gray-500">2小时前</div>
                                        </div>
                                    </div>
                                    <h5 class="font-medium text-gray-800 mb-1">新版本的章节导入功能优化建议</h5>
                                    <p class="text-gray-600 text-sm">希望能够增加对多级章节的直接导入支持，现在的导入功能对于复杂结构的教材还是有点麻烦...</p>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-eye mr-1"></i> 128</span>
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 24</span>
                                        <span><i class="fa fa-thumbs-o-up mr-1"></i> 15</span>
                                    </div>
                                </div>
                                
                                <div class="border-b border-gray-100 pb-3">
                                    <div class="flex items-center mb-2">
                                        <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                        <div class="ml-2">
                                            <div class="font-medium text-sm">王老师</div>
                                            <div class="text-xs text-gray-500">昨天</div>
                                        </div>
                                    </div>
                                    <h5 class="font-medium text-gray-800 mb-1">分享一个知识点关联的实用技巧</h5>
                                    <p class="text-gray-600 text-sm">我发现通过建立跨学科的知识点关联，可以帮助学生更好地理解知识之间的联系，提高学习效果...</p>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-eye mr-1"></i> 96</span>
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 18</span>
                                        <span><i class="fa fa-thumbs-o-up mr-1"></i> 22</span>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex items-center mb-2">
                                        <img src="https://picsum.photos/id/66/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                        <div class="ml-2">
                                            <div class="font-medium text-sm">张老师</div>
                                            <div class="text-xs text-gray-500">3天前</div>
                                        </div>
                                    </div>
                                    <h5 class="font-medium text-gray-800 mb-1">关于多版本共存的最佳实践</h5>
                                    <p class="text-gray-600 text-sm">我们学校使用了多个不同出版社的教材版本，如何在系统中高效管理这些版本并保持数据一致性？...</p>
                                    <div class="flex items-center mt-2 text-xs text-gray-500">
                                        <span class="mr-3"><i class="fa fa-eye mr-1"></i> 156</span>
                                        <span class="mr-3"><i class="fa fa-comment-o mr-1"></i> 32</span>
                                        <span><i class="fa fa-thumbs-o-up mr-1"></i> 28</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 常见问题 -->
                        <div>
                            <h4 class="font-medium text-gray-800 mb-3">近期更新</h4>
                            <div class="space-y-4">
                                <div class="border-l-2 border-primary pl-3 py-1">
                                    <h5 class="font-medium text-gray-800">新版本发布：v2.3.0</h5>
                                    <p class="text-gray-600 text-sm mt-1">增加了章节批量导入导出功能，优化了版本对比界面，修复了部分已知问题。</p>
                                    <div class="text-xs text-gray-500 mt-1">发布时间：2025-06-15</div>
                                </div>
                                
                                <div class="border-l-2 border-gray-300 pl-3 py-1">
                                    <h5 class="font-medium text-gray-800">API文档更新</h5>
                                    <p class="text-gray-600 text-sm mt-1">新增了知识点关联查询接口，完善了数据导入导出API文档。</p>
                                    <div class="text-xs text-gray-500 mt-1">更新时间：2025-06-08</div>
                                </div>
                                
                                <div class="border-l-2 border-gray-300 pl-3 py-1">
                                    <h5 class="font-medium text-gray-800">帮助中心内容优化</h5>
                                    <p class="text-gray-600 text-sm mt-1">新增了视频教程板块，完善了常见问题解答，提高了内容的可读性。</p>
                                    <div class="text-xs text-gray-500 mt-1">更新时间：2025-05-28</div>
                                </div>
                                
                                <div class="border-l-2 border-gray-300 pl-3 py-1">
                                    <h5 class="font-medium text-gray-800">系统性能优化</h5>
                                    <p class="text-gray-600 text-sm mt-1">优化了大数据量下的加载速度，提升了版本对比和知识点关联的处理效率。</p>
                                    <div class="text-xs text-gray-500 mt-1">更新时间：2025-05-15</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 反馈表单 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.6s">
                    <h3 class="font-bold text-lg mb-4">提供反馈</h3>
                    <p class="text-gray-500 mb-4">您的反馈对我们非常重要，帮助我们不断改进产品。</p>
                    
                    <form>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="feedback-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                <input type="text" id="feedback-name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="feedback-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                <input type="email" id="feedback-email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors" placeholder="请输入您的邮箱">
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="feedback-type" class="block text-sm font-medium text-gray-700 mb-1">反馈类型</label>
                            <select id="feedback-type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
                                <option value="">请选择反馈类型</option>
                                <option value="bug">功能故障</option>
                                <option value="suggestion">功能建议</option>
                                <option value="question">使用问题</option>
                                <option value="praise">表扬与感谢</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="feedback-content" class="block text-sm font-medium text-gray-700 mb-1">反馈内容</label>
                            <textarea id="feedback-content" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors" placeholder="请详细描述您的反馈..."></textarea>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <input type="checkbox" id="feedback-agree" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="feedback-agree" class="ml-2 block text-sm text-gray-700">我同意按照隐私政策处理我的反馈信息</label>
                        </div>
                        
                        <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                            提交反馈
                        </button>
                    </form>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">教材资源管理系统</h4>
                    <p class="text-gray-600 text-sm mb-4">为教育工作者提供高效的教材管理和知识关联工具，助力教学质量提升。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">产品</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">功能介绍</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">更新日志</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">API文档</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">价格方案</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">支持</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">视频教程</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">社区交流</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">法律</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">服务条款</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">版权声明</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-200 mt-6 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm">© 2025 教材资源管理系统 版权所有</p>
                <div class="mt-4 md:mt-0 flex items-center space-x-4 text-sm text-gray-500">
                    <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="hover:text-primary transition-colors">服务条款</a>
                    <a href="#" class="hover:text-primary transition-colors">Cookie政策</a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- 在线客服悬浮按钮 -->
    <div class="fixed bottom-6 right-6 z-50">
        <button class="bg-primary text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-primary/90 transition-all hover:scale-105">
            <i class="fa fa-comments-o text-xl"></i>
        </button>
    </div>
    
    <!-- JavaScript -->
    <script>
        // FAQ 折叠功能
        document.addEventListener('DOMContentLoaded', function() {
            const faqQuestions = document.querySelectorAll('.faq-question');
            
            faqQuestions.forEach(question => {
                question.addEventListener('click', function() {
                    const answer = this.nextElementSibling;
                    const icon = this.querySelector('i');
                    const faqItem = this.parentElement;
                    
                    // 切换当前FAQ项的状态
                    answer.classList.toggle('hidden');
                    icon.classList.toggle('fa-angle-down');
                    icon.classList.toggle('fa-angle-up');
                    faqItem.classList.toggle('faq-active');
                    
                    // 关闭其他打开的FAQ项
                    faqQuestions.forEach(otherQuestion => {
                        if (otherQuestion !== question) {
                            const otherAnswer = otherQuestion.nextElementSibling;
                            const otherIcon = otherQuestion.querySelector('i');
                            const otherFaqItem = otherQuestion.parentElement;
                            
                            otherAnswer.classList.add('hidden');
                            otherIcon.classList.remove('fa-angle-up');
                            otherIcon.classList.add('fa-angle-down');
                            otherFaqItem.classList.remove('faq-active');
                        }
                    });
                });
            });
            
            // 移动端侧边栏切换
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const sidebar = document.getElementById('sidebar');
            
            sidebarToggle.addEventListener('click', function() {
                sidebar.classList.toggle('-translate-x-full');
            });
            
            // 滚动时导航栏样式变化
            const header = document.querySelector('header');
            let lastScrollY = window.scrollY;
            
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow-md');
                    header.classList.add('shadow-sm');
                }
                
                lastScrollY = window.scrollY;
            });
            
            // 添加淡入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const fadeInObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        fadeInObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(element => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out';
                fadeInObserver.observe(element);
            });
        });
    </script>
</body>
</html>
